<template>
	<view class="page">
		<!-- 顶部通知栏 -->
		<view class="header">
			<view class="notice" v-if="chatStatus == 'active'">医生已接诊</view>
			<view class="notice" v-else-if="chatStatus == 'ended'">就诊已结束</view>
			<view class="notice" v-else>医生还未接诊，剩余发送消息数{{everyDayConsultaionNum - sendedMessages}}条</view>
		</view>

		<scroll-view class="chat-container" scroll-y :scroll-into-view="scrollToView">
			<!-- 根据status和id动态显示消息 -->
			<view v-for="(message, index) in messageList" :key="index" :id="'msg-'+index" class="message"
				:class="message.type">
				<image class="avatar" :src="message.avatar" mode="aspectFill"></image>
				<view class="content"
					:class="{'prescription': message.isPrescription, 'inquiry-card': message.isInquiry}">
					<!-- 问诊单 -->
					<view v-if="message.isInquiry" class="inquiry-card">
						<!-- 问诊单内容 -->
						<view class="card-header">
							<text class="header-title">问诊单</text>
						</view>
						<view class="card-content">
							<view class="section">
								<text class="label">病症描述：</text>
								<text class="value">多为阵发性绞痛，排便后可能缓解（如肠炎）；若腹痛剧烈且持续，需警惕肠梗阻、肠穿孔等急重症。</text>
							</view>
							<view class="section">
								<text class="label">线下就诊情况：</text>
								<text class="value">已去线下医院就诊</text>
							</view>
							<view class="section files">
								<text class="label">相关病历资料：</text>
								<u-button size="mini" class="view-btn">
									<text class="btn-text">查看大图</text>
								</u-button>
								<text class="file-count">+9张</text>
							</view>
							<view class="section">
								<text class="label">既往史：</text>
								<text class="value">高血压、高血糖、高血压</text>
							</view>
							<view class="section">
								<text class="label">过敏史：</text>
								<text class="value">无</text>
							</view>
							<view class="section">
								<text class="label">家族史：</text>
								<text class="value">无</text>
							</view>
							<view class="section">
								<text class="label">婚育史：</text>
								<text class="value">已婚</text>
							</view>
							<view class="section">
								<text class="label">个人史：</text>
								<text class="value">无</text>
							</view>
						</view>
					</view>

					<!-- 处方 -->
					<view v-else-if="message.isPrescription" class="prescription">
						<!-- 处方内容 -->
						<view class="prescription-header">
							<text class="prescription-title">电子处方</text>
						</view>
						<view class="prescription-content">
							<view class="patient-info">
								<text class="name">患者：王庆 男 33岁</text>
								<text class="diagnosis">诊断：支气管炎</text>
								<text class="time">开放时间：2025-09-09 13:59:40</text>
							</view>
						</view>
						<view class="detail-btn">
							<text class="btn-text" @click="toPage(message)">查看详情</text>
						</view>
					</view>

					<!-- 普通文本消息 -->
					<text v-else class="text">{{message.content}}</text>
				</view>
			</view>

			<!-- 评价框（只在ended状态显示） -->
			<view v-if="chatStatus === 'ended'" class="assess-box">
				<view class="assess-text" @click="goToEvaluate">评价</view>
			</view>
		</scroll-view>

		<!-- 输入区域（只在active状态显示） -->
		<view v-if="chatStatus !== 'ended'" class="input-area">
			<!-- 输入区域内容 -->
			<view class="input-icon">
				<img src="../../static/messages/chat-yuyin-icon.png" style="height: 48rpx; width: 48rpx;"></img>
			</view>
			<view class="input-box">
				<input class="input" v-model="inputValue" type="text" :placeholder="everyDayConsultaionNum - sendedMessages == 0 
            ? chatStatus == 'active'
            ?'提问次数为0，请等待医生增加'
            :'请耐心等待医生接诊'
            :'如有其他症状请输入'" placeholder-style="color: #999999;" @confirm="sendTextMessage"
					:disabled="everyDayConsultaionNum - sendedMessages == 0" />
			</view>
			<view class="input-icon">
				<img src="../../static/messages/chat-biaoqing-icon.png" style="height: 48rpx; width: 48rpx;"></img>
			</view>
			<view class="input-icon">
				<img src="../../static/messages/chat-other-icon.png" style="height: 48rpx; width: 48rpx;"></img>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		dictionarySelect
	} from '../../api/dictionary';
	export default {
		name: "chat",
		data() {
			return {
				inputValue: '',
				sendedMessages: null, // 剩余消息数
				chatStatus: '', // 聊天状态
				chatId: '', // 聊天ID
				messageList: [], // 消息列表
				scrollToView: '', // 滚动到指定消息
				everyDayConsultaionNum: 5, // 患者每日可以 问诊的条数
			}
		},
		onLoad(options) {
			// 获取传递的参数
			this.chatStatus = options.status || 'active';
			this.chatId = options.id || '';
			this.init()
			// 根据状态和ID加载对应的消息数据
			this.loadChatData();

		},
		methods: {
			init() {
				dictionarySelect({
					"code": 'everyDayConsultaionNum',
					status: 1
				}).then(res => {
					if (res.length > 0) {
						let num = res[0].describe
						if (num) {
							this.everyDayConsultaionNum = parseInt(num)
						}
					}
				})
			},
			loadChatData() {
				// 模拟根据status和id加载不同的消息数据
				if (this.chatId === 'msg-1') {
					this.messageList = [{
							type: 'user',
							avatar: '../../static/images/patient/user-avatar.jpg',
							content: '您好，我有一些健康问题想咨询',
							isInquiry: true
						},
						{
							type: 'doctor',
							avatar: '../../static/images/icon/messages-doctor-avatar.png',
							content: '您好，请详细描述您的症状',
							isPrescription: false
						}
					];
				} else if (this.chatId === 'msg-2') {
					this.messageList = [{
							type: 'user',
							avatar: '../../static/images/patient/user-avatar.jpg',
							content: '我最近肠胃不舒服',
							isInquiry: true
						},
						{
							type: 'user',
							avatar: '../../static/images/patient/user-avatar.jpg',
							content: '你好医生，这是我的问诊单，我最近肠胃不舒服',
							isInquiry: false
						},
						{
							type: 'doctor',
							avatar: '../../static/images/icon/messages-doctor-avatar.png',
							content: '您好，您这种情况是慢性肠胃炎，建议服用药物调理。',
							isPrescription: false
						},
						{
							type: 'user',
							avatar: '../../static/images/patient/user-avatar.jpg',
							content: '好的，谢谢。',
							isInquiry: false
						}
					];
				} else if (this.chatId === 'msg-3') {
					this.messageList = [{
							type: 'user',
							avatar: '../../static/images/patient/user-avatar.jpg',
							content: '问诊单内容...',
							isInquiry: true
						},
						{
							type: 'doctor',
							avatar: '../../static/images/icon/messages-doctor-avatar.png',
							content: '稍等，我详细看一下过往记录',
							isPrescription: false
						},
						{
							type: 'doctor',
							avatar: '../../static/images/icon/messages-doctor-avatar.png',
							content: '处方内容...',
							isPrescription: true
						}
					];
				}

				this.sendedMessages = this.messageList.filter(item => item.type === 'user').length;

				// 滚动到底部
				this.$nextTick(() => {
					if (this.messageList.length > 0) {
						this.scrollToView = 'msg-' + (this.messageList.length - 1);
					}
				});
			},
			// 跳转评价页面
			goToEvaluate() {
				uni.navigateTo({
					url: '/pages/Introduce/MedicalEvaluation'
				});
			},
			toPage(item) {
				uni.navigateTo({
					url: '/pages/Home/ServePatient/PrescriptionDetail?item=' + item
				});
			},
			toggleEmoji() {
				showEmoji = !showEmoji;
			},
			selectEmoji(emoji) {
				inputValue += emoji;
				showEmoji = false;
			},
			// 发送文本消息
			sendTextMessage() {
				if (this.inputValue.trim()) {
					console.log('发送文本消息:', this.inputValue);
					// 这里添加发送消息的逻辑
					this.messageList.push({
						type: 'user',
						avatar: '../../static/images/patient/user-avatar.jpg',
						content: this.inputValue,
						isInquiry: false
					})
					this.sendedMessages++;
					this.inputValue = '';
				}
			},
		}
	};
</script>

<style scoped>
	page {
		height: 100%;
	}

	.page {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #f5f5f5;
	}

	.header {
		padding: 25rpx 0;
		background: #E1F9FA;
	}

	.notice {
		font-size: 26rpx;
		color: #2E6D78;
		text-align: center;
	}

	.chat-container {
		flex: 1;
		overflow: auto;
		padding: 0 30rpx 10rpx;
		box-sizing: border-box;
	}

	/* 消息样式 */
	.message {
		display: flex;
		margin-top: 30rpx;
	}

	/* 医生消息 - 靠左 */
	.message.doctor {
		justify-content: flex-start;
	}

	.message.doctor .avatar {
		margin-right: 24rpx;
		margin-left: 0;
	}

	.message.doctor .content {
		background-color: #FFFFFF;
		border-radius: 0 24rpx 24rpx 24rpx;
		margin-top: 26rpx;
		font-size: 28rpx;

		&.prescription {
			border-radius: 0 40rpx 40rpx 40rpx;
			width: 488rpx;
			height: 332rpx;
			background: url('../../static/messages/chat-pre-bg.png') no-repeat;
			background-size: cover;
		}
	}

	/* 用户消息 - 靠右 */
	.message.user {
		justify-content: flex-end;
	}

	.message.user .avatar {
		margin-left: 24rpx;
		margin-right: 0;
		order: 2;
		/* 头像在右边 */
	}

	.message.user .content {
		order: 1;
		/* 内容在左边 */
		background-color: #44CFDA;
		color: white;
		font-size: 28rpx;
		border-radius: 24rpx 0 24rpx 24rpx;
		margin-top: 26rpx;
	}

	.avatar {
		width: 88rpx;
		height: 88rpx;
		border-radius: 40rpx;
		flex-shrink: 0;
	}

	.content {
		max-width: 70%;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.text {
		font-size: 14px;
		line-height: 1.5;
	}

	/* 评价 */
	.assess-box {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #76E1E7;
		border-radius: 36rpx;
		margin: 30rpx 36rpx;
		padding: 16rpx 0;
	}

	.assess-text {
		color: #fff;
		font-size: 30rpx;
	}

	/* 输入区域样式 */
	.input-area {
		padding: 20rpx 32rpx;
		background-color: #F2F2F2;
		border-top: 1px solid #f0f0f0;
		display: flex;
		justify-content: space-between;
		height: 112rpx;
	}

	.input-icon {
		display: flex;
		align-items: center;
	}

	.input-box {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 36rpx;
		padding: 20rpx 30rpx;
	}

	.input {
		flex: 1;
		font-size: 26rpx;
		color: #999999;
	}

	/* 操作按钮 */
	.action-btns {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.action-btn {
		padding: 15rpx;
	}

	.send-btn {
		background: #5b8cff;
		border-radius: 50%;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 问诊单和处方样式 */
	.inquiry-card {
		margin-bottom: 0;
	}

	.card-header,
	.prescription-header {
		margin-bottom: 16rpx;
	}

	.header-icon,
	.prescription-icon {
		margin-right: 10rpx;
		width: 20px;
		height: 20px;
	}

	.header-title {
		font-size: 28rpx;
		color: #fff;
		font-weight: 400;
	}

	.prescription-title {
		font-size: 28rpx;
		color: #2E6D78;
		font-weight: 400;
	}

	.section {
		margin-bottom: 24rpx;
	}

	.label {
		font-size: 28rpx;
		color: #FFFFFF;
		margin-right: 10rpx;
	}

	.value {
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.files {
		display: flex;
		align-items: center;
	}

	.view-btn {
		display: flex;
		align-items: center;
		margin: 0 10rpx;
		padding: 0 20rpx;
	}

	.btn-icon {
		margin-right: 6rpx;
		width: 14px;
		height: 14px;
	}

	.btn-text {
		font-size: 28rpx;
		color: #2E6D78;
		line-height: 36rpx;
	}

	.file-count {
		font-size: 12px;
		color: #666;
	}

	.prescription-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx;
	}

	.patient-info {
		display: flex;
		flex-direction: column;
	}

	.name {
		font-size: 24rpx;
		color: #333333;
		margin-bottom: 24rpx;
	}

	.diagnosis {
		font-size: 24rpx;
		color: #333333;
		margin-bottom: 24rpx;
	}

	.time {
		font-size: 24rpx;
		color: #333333;
	}

	.detail-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 10rpx 0 12rpx;
	}
</style>